<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>类型选择</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">
</head>

<body style="background: #fff;">
    <div class="choose-list">
        <!-- header -->
        <div class="mui-content mui-row mui-fullscreen" style="min-height: 1000px;">
            <div class="mui-col-xs-3">
                <div id="segmentedControls"
                    class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                    <div id="firstTypeList">
                    </div>
                </div>
            </div>
            <div id="segmentedControlContents" class="mui-col-xs-9">
                    <div class="widget-default widget-body" id="secondTypeList">
                        
                    </div>
                </div>
            </div>
        </div>


    </div>

    <script src="../js/dsbridge.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/app/app-base.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>
    <script>
        var typeData ;
        var firstTypeCode = localStorage.getItem("video-list-firstTypeCode");
        $(document).ready(function(){
            //获取视频分类
            getVideoType();
        })

        function getVideoType(){
            var data = {
            }
            getServerData(url_agrivideoInfo_getVideoType, data);
        }

        function getServerDataSuccess(url, data) {
            switch(url){
                case url_agrivideoInfo_getVideoType:
                    typeData = data.data;
                    var h5 = '';
                    if(typeData != null && typeData.length > 0){
                        $.each(typeData,function (index,item){
                            h5 += '<a code="'+item.code+'" class="firstType mui-control-item '+(item.code == firstTypeCode ? 'mui-active': '')+'">'+item.name+'</a>';
                        })
                    }
                    $("#firstTypeList").html(h5);
                    $(".firstType:first").click();
                    //设置二三级分类
                    set23Type(firstTypeCode);
                    break;
                case url_agrivideoInfo_saveUserVideoHobby:
                    dsBridge.call("goVideoList","");
                    break;
            }
        }

        //选择一级分类
        mui("#firstTypeList").on('tap','.firstType',function(){
            var firstTypeCode = $(this).attr("code");
            //设置二三级分类
            set23Type(firstTypeCode);
        });

        //设置二三级分类
        function set23Type(firstTypeCode){
            var h5 = '';
            if(typeData != null && typeData.length > 0){
                $.each(typeData,function (index,item){
                    if(item.code == firstTypeCode){
                        var secondList = item.children;
                        if(secondList != null && secondList.length > 0){
                            $.each(secondList,function(sIndex,sItem){
                                h5 += '<div id="secondTypeDiv">'
                                    + '<p code="'+sItem.code+'" class="secondType font-14 black font-weight">'+sItem.name+'</p>'
                                    + '<div class="display-flex flex-warp">';
                                var thirdList = sItem.children;
                                if(thirdList != null && thirdList.length > 0){
                                    $.each(thirdList,function(tIndex,tItem){
                                        h5 += '<span code="'+tItem.code+'" class="thirdType btn-choose font-13 margin-l-10 gray margin-b-10 elli1">'+tItem.name+'</span>'
                                    })
                                }
                                h5 += '</div>'
                                     + '</div>';
                            })
                        }
                    }
                })
            }
            $("#secondTypeList").html(h5);
        }

        //选择三级类型
        mui("#secondTypeList").on('tap','.thirdType',function(){
            $(".thirdType").removeClass("choose-bg");
            $(this).addClass("choose-bg");
            var thirdTypeCode = $(this).attr("code");
            var secondTypeCode = $(this).parents("#secondTypeDiv").find(".secondType").attr("code");
            var secondTypeName = $(this).parents("#secondTypeDiv").find(".secondType").text();
            localStorage.setItem("video-list-thirdTypeCode",thirdTypeCode);
            localStorage.setItem("video-list-secondTypeCode",secondTypeCode);
            dsBridge.call("goVideoList2",secondTypeName);
        });
    </script>
</body>

</html>